<!-- home -->
<template>
  <page-view :full="true">
    <top-bar :on-back="goBack" title="订单详情"
             :white="true">
      <div><span v-if="!isPay && !initLoading" class="or-size"
              @click="cancel">取消订单</span></div>
    </top-bar>
    <page-content>
      <div class="o-container">
        <div class="o-contant">
        </div>
        <div class="o-position">
          <div class="o-con">
            <van-skeleton title avatar :row="3" :loading="initLoading">
              <div class="o-imgbox">
                <img src="../../assets/image/product/pay.png"
                    alt=""
                    class="o-money">
                <div class="o-bs">
                  <p class="o-name">{{status(info.state)}}</p>
                  <p class="o-time">创建时间：{{+(info.creation_time+'000') | formatDate('yyyy-MM-dd hh:mm')}}</p>
                </div>
              </div>
              <div class="o-order">
                <span>订单号：<span class="o-number">{{info.order_no}}</span></span>
                <copy-text :text="info.order_no">
                  <van-button round
                              type="info"
                              class="o-btn">复制</van-button>
                </copy-text>
              </div>
              </van-skeleton>
          </div>
          <div class="o-list">
            <van-skeleton title :row="3" :loading="initLoading">
              <div class="o-item">
                存储服务器（分布式）A-1T
              </div>
              <div class="o-item">
                <span class="o-span">购买份数</span>
                <span class="o-span">x{{info.number}}</span>
              </div>
              <div class="o-item">
                <span class="o-span">设备单价</span>
                <span class="o-span">{{info.unit_price}} XCH</span>
              </div>
              <div class="o-item">
                <span class="o-span">产品周期</span>
                <span class="o-span">{{info.property_right_cycle}}天</span>
              </div>
              <div class="o-total">总价 <span></span>{{info.price}} XCH</div>
            </van-skeleton>
          </div>
          <div v-if="isPay" class="valid-cycle">有效期至：<span>{{+(info.validity_end_time+'000') | formatDate('yyyy-MM-dd')}}</span></div>
          <div v-if="!isPay" class="o-tip">确定支付后不支持退款，请仔细确定订单信息</div>
          <div v-if="!isPay" class="o-payBox">
            <p class="o-way">支付方式</p>
            <van-skeleton :row="4" :loading="initPayLoading">
              <van-tabs v-model="active"
                        color="#585DF9"
                        line-width="44px"
                        title-active-color="#585DF9"
                        title-inactive-color="#3D3E54">
                <van-tab title="银行卡支付">
                  <div class="zf-box">
                    <p class="zf-zh">请转账至银行卡：</p>
                    <p class="zf-kh">{{payInfo.BANK_CARD_NO}}</p>
                  </div>
                </van-tab>
                <van-tab title="微信支付">
                  <div class="zf-box">
                    <p class="zf-zh wechatId">请转账至微信账号：
                      <copy-text :text="payInfo.CUSTOMER_WECHAT">
                        <van-button round
                              type="info"
                              class="o-btn">复制</van-button>
                      </copy-text>
                    </p>
                    <p class="wechat">
                      <img v-lazy="payInfo.PAY_CODE">
                    </p>
                    <p class="no"> {{payInfo.CUSTOMER_WECHAT}} </p>
                  </div>
                </van-tab>
              </van-tabs>
            </van-skeleton>
          </div>
          <p class="zf-sx">投资有风险，入市需谨慎</p>
        </div>
        <div v-if="!isPay && !initLoading" class="zf-bottom">
          <div>
            <span class="zf-w">总价</span>
            <span class="zf-all">{{info.price}}</span>
          </div>
          <van-button round
                      type="info"
                      class="zf-btn"
                      @click="goProof">已完成支付</van-button>
        </div>
      </div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import CopyText from '@/components/Copy';
import service from '@/utils/request';
import { Dialog } from 'vant';

export default {
  components: {
    TopBar,
    PageView,
    PageContent,
    CopyText
  },
  data () {
    return {
      active: "0",
      isPay: false,
      info: {},
      orderId: "",
      initLoading: true,
      initPayLoading: true,
      payInfo: {}
    }
  },
  mounted () {
    this.initLoading = true;
    this.initPayLoading = true;
    this.orderId = this.$route.params.orderId;
    this.getData().then(e=>{
      this.initLoading = false;
      return this.getPayData();
    }).then(e=>{
      this.initPayLoading = false;
    });
  },
  activated(){
    let bp = this.$router.backParams();
    if(bp && bp.isPay){
      this.isPay = true;
      this.getData();
    }
    if(this.orderId != this.$route.params.orderId){
      this.orderId = this.$route.params.orderId;
      this.getData();
    }
  },
  methods: {
    status(state){
      switch(state){
        // -1-已取消 0-待支付 1-已支付（待审核） 2-生效中 3-已终止
        case -1:
          return '已取消';
        case 0:
          return '待支付';
        case 1:
          return '已支付（待审核）';
        case 2:
          return '生效中';
        case 3:
          return '已终止';
      }
    },
    goDetail () {
      this.$router.push({ path: '/walletDetail' })
    },
    cancel () {
      let self = this;
      Dialog.confirm({
        title: '确定取消支付？',
        message: '是否离开支付订单，超时待支付订单系统将自动取消，如需要重新支付青到“我的订单”查看！',
        confirmButtonColor: '#585DF9',
        cancelButtonText: '确定离开',
        confirmButtonText: '继续支付'
      })
      .then(() => {
        // 继续支付
      })
      .catch(() => {
        // 确定离开
        return service.post('/apiCancelOrder.do', {
          order_no: self.info.order_no
        }).then(res=>{
          this.$router.back({
            order: false,
            isPay: false
          })
        })
      });
    },
    goBack() {
      this.$router.back({
        order: true,
        isPay: this.isPay
      })
      return false;
    },
    goProof () {
      this.$router.push({ path: `/proof/${this.orderId}` })
    },
    getData(){
      return service.post('/apiGetOrderInfo.do', {
        order_no: this.orderId
      }, {
        hideloading: true
      }).then(res=>{
        this.info = res.data;
        if(this.info.state == 0){
          this.isPay = false;
        }else{
          this.isPay = true;
        }
      })
    },
    getPayData(){
      return service.post('/apiGetPayType.do', null, {
        hideloading: true
      }).then(res=>{
        this.payInfo = res.data
      })
    }
  }
}
</script>
<style lang="scss" scope>
.or-size {
  font-size: 16px;
}
.o-container {
  min-height: 100vh;
  background: #f2f1f8;
  overflow: hidden;
  .van-tabs__wrap {
    width: 180px;
  }
  .o-contant {
    height: 164px;
    background: #585df9;
    padding: 0 20px;
    overflow: hidden;
    .w-header {
      margin-top: 39px;
      height: 29px;
      line-height: 29px;
      display: flex;
      justify-content: space-between;
      .w-back {
        width: 22px;
        height: 22px;
      }
      .w-m {
        font-size: 21px;
        font-weight: 500;
        color: #fff;
      }
      .w-j {
        font-size: 14px;
        font-weight: 400;
        color: #fff;
      }
    }
  }
  .o-position {
    height: auto;
    padding: 0 20px 55px 20px;
    margin-top: -74px;
    .o-con {
      height: 149px;
      background: #fff;
      border-radius: 10px;
      padding: 0 15px;
      box-sizing: border-box;
      background: #fff;
      overflow: hidden;
      .o-imgbox {
        margin-top: 17px;
        .o-money {
          width: 70px;
          margin-right: 15px;
          display: inline-block;
          vertical-align: middle;
        }
        .o-bs {
          display: inline-block;
          vertical-align: middle;
          .o-name {
            height: 25px;
            font-size: 18px;
            font-weight: 500;
            color: #3d3e54;
            line-height: 25px;
          }
          .o-time {
            height: 17px;
            font-size: 12px;
            font-weight: 500;
            color: #92919c;
            line-height: 17px;
          }
        }
      }
      .o-order {
        height: 37px;
        line-height: 37px;
        background: #f2f1f8;
        border-radius: 19px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        padding: 0 4px 0 20px;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 400;
        color: #92919c;
        .o-number {
          color: #92919c;
        }
        .o-btn {
          width: 62px;
          height: 29px;
          line-height: 29px;
          background: #585df9;
          border-radius: 15px;
          color: #ffffff;
          text-align: center;
          margin-top: 4px;
        }
      }
    }
    .o-list {
      height: 215px;
      background: #ffffff;
      border-radius: 10px;
      padding: 0 20px;
      margin-top: 12px;
      .o-item {
        height: 42px;
        line-height: 42px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        font-weight: 500;
        color: #3d3e54;
        display: flex;
        justify-content: space-between;
        .o-span {
          font-size: 13px;
          font-weight: 400;
          color: #92919c;
        }
      }
      .o-total {
        height: 42px;
        line-height: 42px;
        text-align: right;
        font-size: 12px;
        font-weight: 500;
        color: #3d3e54;
        span {
          font-size: 16px;
        }
      }
    }
    .o-tip {
      height: 17px;
      font-size: 12px;
      text-align: right;
      font-weight: 400;
      color: #92919c;
      line-height: 17px;
      margin: 12px 0;
    }
    .o-payBox {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 20px 15px;
      overflow: hidden;
      .o-way {
        height: 17px;
        font-size: 12px;
        font-weight: 500;
        color: #3d3e54;
        line-height: 17px;
      }
      .zf-box {
        margin-top: 20px;
        .zf-zh {
          height: 17px;
          font-size: 12px;
          font-weight: 500;
          color: #3d3e54;
          line-height: 17px;
        }
        .zf-kh {
          height: 28px;
          font-size: 20px;
          font-weight: 500;
          color: #3d3e54;
          line-height: 28px;
        }
      }
      .wechat{
        text-align: center;
        img{
          width: 200px;
          height: 200px;
          margin: 10px;
        }
      }
      .no{
        text-align: center;
      }
    }
    .zf-sx {
      height: 17px;
      font-size: 12px;
      text-align: center;
      font-weight: 400;
      color: #92919c;
      line-height: 17px;
      margin-top: 13px;
    }
  }
  .zf-bottom {
    width: 100%;
    height: 75px;
    line-height: 75px;
    background: #ffffff;
    border: 1px solid #ffffff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 2;
    .zf-w {
      font-size: 14px;
      color: #3d3e54;
    }
    .zf-all {
      font-size: 24px;
      margin-left: 9px;
      font-weight: 600;
      color: #585df9;
    }
    .zf-btn {
      width: 161px;
      height: 44px;
      background: #585df9;
      border-radius: 29px;
      font-size: 17px;
      font-weight: 500;
      color: #ffffff;
      margin-top: 17px;
    }
  }
}
.wechatId{
  display: flex;
  justify-content: space-between;
  .o-btn{
    margin-top: -5px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: #585df9;
    border-radius: 15px;
    color: #ffffff;
    text-align: center;
  }
}
.valid-cycle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  padding: 0 20px;
  height: 42px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #92919C;
  border-radius: 15px;
  background-color: #fff;
}
</style>
